<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<div id="target"></div>
<script>
var testCases = [
  ['-webkit-box-reflect', 'below 0px url("chrome:") 0 fill / auto / 0px stretch'],
  ['-webkit-mask-box-image-source', 'url("chrome:")'],
  ['-webkit-mask-image', 'url("chrome:")'],
  ['background-image', 'url("chrome:")'],
  ['border-image-source', 'url("chrome:")'],
  ['list-style-image', 'url("chrome:")'],
  ['shape-outside', 'url("chrome:")'],
];

test(() => {
  for (const [property, value] of testCases) {
    target.style[property] = value;
  }
  var computedStyle = getComputedStyle(target);
  for (const [property, value] of testCases) {
    assert_equals(computedStyle[property], value, property);
  }
  // Force a second style recalc so that the image gets cached and reused.
  target.style.left = '0px'; // Force style recalc.
  for (const [property, value] of testCases) {
    assert_equals(computedStyle[property], value, property);
  }
}, 'Invalid URL protocols should serialise as their original URL strings after multiple recalcs');
</script>
